<template>
  <div class="item-info">
    <van-nav-bar
      :title="item.title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="$toast('正在开发中')"
      fixed
      placeholder
    >
      <template #right>
        <van-icon name="question-o" size="18" />
      </template>
    </van-nav-bar>

    <div class="pic">
      <van-image fit="cover" height="300" :src="item.image" />
    </div>

    <div class="info">
      <div class="title">
        <van-row>
          <van-col span="24">
            <van-tag
              class="middle"
              style="padding: 1px 3px;margin-right: 8px"
              type="danger"
            >{{item.shopType}}</van-tag>
            <span class="middle">{{item.title}}</span>
          </van-col>
        </van-row>

        <div class="price" v-if="item.coupon">
          <van-tag plain class="middle" style="font-size: 15px;padding: 2px 2px;" type="danger">券后价</van-tag>
          <span style="vertical-align: sub;margin-left: 8px">¥</span>
          <span class="middle" style="font-size: 25px;">{{item.price}}</span>
        </div>
        <van-row class="sub" v-if="item.coupon">
          <van-col span="12">
            现价
            <span style="text-decoration:line-through;">¥{{item.originalPrice}}</span>
          </van-col>
          <van-col span="12" style="text-align: right;">已售{{item.volume}}件</van-col>
        </van-row>

        <van-row class="price" v-else>
          <van-col span="12">
            <van-tag plain class="middle" style="font-size: 15px;padding: 2px 2px;" type="danger">现价</van-tag>
            <span style="vertical-align: sub;margin-left: 8px">¥</span>
            <span class="middle" style="font-size: 25px;">{{item.price}}</span>
          </van-col>
          <van-col
            class="sub"
            span="12"
            style="text-align: right;line-height: 33px;"
          >已售{{item.volume}}件</van-col>
        </van-row>
      </div>

      <div class="content">
        <van-row v-if="item.coupon">
          <van-col span="2" style="text-align: center;">
            <van-icon name="shop-o" />
          </van-col>
          <van-col span="22">{{item.shopName}}</van-col>
        </van-row>
        <van-row v-if="item.coupon">
          <van-col span="2" style="text-align: center;">
            <van-icon name="discount" />
          </van-col>
          <van-col span="22">
            优惠券
            <span class="price">{{item.coupon.amount}}元</span>
            <span class="sub">（满{{item.coupon.startFee}}使用）</span>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="2" style="text-align: center;">
            <van-icon name="gold-coin-o" />
          </van-col>
          <van-col span="22">
            返利
            <span class="price">{{item.rebateRate}}</span>
            <span class="sub">
              （预计
              <span class="price">{{item.rebate}}元</span>）
            </span>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="2" style="text-align: center;">
            <van-icon name="gift-card-o" />
          </van-col>
          <van-col span="22">
            淘口令：
            <br />
            <span class="sub">
              <span v-html="passwordHtml"></span>
            </span>
          </van-col>
        </van-row>
      </div>
    </div>

    <div class="more">
      <van-divider
        dashed
        :style="{ color: '#9ea1a5', borderColor: '#9ea1a5', padding: '0 16px' }"
      >相似商品</van-divider>

      <item2-list ref="item2List" @click="clickItem" />
      <van-divider>没有喽</van-divider>
    </div>
    <van-goods-action>
      <copy ref="copy" successMsg="淘口令已复制，请打开手淘使用" errorMsg="淘口令复制失败，请自行复制" />
      <van-goods-action-icon icon="question-o" text="使用说明" @click="$toast('正在开发中')" />
      <van-goods-action-icon icon="star-o" text="收藏" color="#ff5000" @click="$toast('正在开发中')" />
      <van-goods-action-button v-if="login && item.rebate" type="warning" @click="redPacket" :text="'分享赚' + item.rebate + '元'" />
      <van-goods-action-button v-else type="warning" text="登录后可分享" />
      <van-goods-action-button type="danger" @click="copy" text="复制淘口令" />
    </van-goods-action>
  </div>
</template>

<script>
import Copy from "@/components/Copy.vue";
import Item2List from "@/components/item/Item2List.vue";
import {
  NavBar,
  Tag,
  Row,
  Col,
  Icon,
  Image,
  Divider,
  GoodsAction,
  GoodsActionButton,
  GoodsActionIcon
} from "vant";
export default {
  name: "ItemInfo",
  components: {
    Copy,
    Item2List,
    [NavBar.name]: NavBar,
    [Row.name]: Row,
    [Col.name]: Col,
    [Tag.name]: Tag,
    [Icon.name]: Icon,
    [Image.name]: Image,
    [Divider.name]: Divider,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionButton.name]: GoodsActionButton,
    [GoodsActionIcon.name]: GoodsActionIcon
  },
  data() {
    return {
      item: {},
      redPacketText: "",
      redPacketDisabled: false,
      login: false
    };
  },
  computed: {
    passwordHtml() {
      return this.item.password
        ? this.item.password.replace(/\n/g, "<br />")
        : "";
    }
  },
  mounted() {
    this.$nextTick(function() {
      let token = this.$cookies.get("token");
      this.login = token != null
    });
  },
  beforeRouteEnter(to, from, next) {
    // scrollTo(0, 0);
    let token = to.query.token;
    if (!token) {
      next("/");
      return;
    }
    next(vm => {
      vm.init(token);
    });
  },
  beforeRouteUpdate(to, from, next) {
    // scrollTo(0, 0);
    let token = to.query.token;
    if (!token) {
      next("/");
      return;
    }
    this.init(token);
  },
  methods: {
    init(token) {
      let vm = this;
      vm.item = {};
      vm.$ajax.get("/commodity/v1/getInfo?token=" + token).then(function(r) {
        vm.item = r.data;
        vm.$ajax
          .get(
            "/commodity/v1/recommend?materialId=13256&pageSize=10&itemId=" +
              vm.item.id
          )
          .then(rr => {
            vm.$refs.item2List.replace(rr.data.data);
          });
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    copy() {
      this.$ajax.post("/commodity/logCopyPassword2", this.item.token, {
        headers: { "Content-Type": "text/plain" }
      });
      this.$refs.copy.copy(this.item.password);
    },
    clickItem(token) {
      window.scrollTo(0, 0);
      this.$router.push({
        path: "/itemInfo",
        query: { token }
      });
    },
    redPacket() {
      this.$ajax.get("/member/redPacket").then(r => {});
    }
  }
};
</script>

<style scoped>
.item-info {
  background-color: #eee;
}

.van-goods-action {
  border-top: 1px solid #ebedf0;
  padding: 5px;
}

.price {
  color: red;
}

.pic {
  text-align: center;
  height: 300px;
}

.sub {
  color: #bbb;
  font-size: 13px;
}

.title {
  padding: 4px 8px;
  background-color: white;
}

.middle {
  vertical-align: middle;
}

.content {
  padding: 8px 8px 0 8px;
  font-size: 13px;
  background-color: #f3f3f3;
  color: #413d3d;
}
.van-col {
  margin-bottom: 8px;
}

.more {
  padding: 10px;
}
</style>